<template>
	<view>
		<!-- 最外层的容器 -->
		<view class="my-settle-container ani" :style="[{ height: he + 'rpx' }]">
			<!-- 全选区域 -->
			<label class="radio" @click="allradioClickHandler">
				<radio color="#7976e9" :checked="isFullCheck" /><text>全选</text>
			</label>
			<!-- 合计区域 -->
			<view class="amount-box ">
				<view class="flex_row" style="align-items: flex-end;">
					<view class="">
						合计:<text class="amount color_orange">￥{{ totalPrice}}</text>
					</view>
					<view class="size_12 color_grey">
						不含运费
					</view>
				</view>
			</view>
			<!-- 结算按钮 -->
			<view class="btn-settle" @click="settlement">提交订单</view>
		</view>


		<view class="my-settle-container ani" v-if="bo">
			<!-- 全选区域 -->
			<label class="radio" @click="allradioClickHandler">
				<radio color="#7976e9" :checked="isFullCheck" /><text>全选</text>
			</label>
			<!-- 结算按钮 -->
			<view class="btn-settle" @click="deleteTlement()">删除</view>
		</view>
	</view>
</template>

<script>
	import cart from 'api/cart/cart';

	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters,
	} from 'vuex'

	export default {
		data() {
			return {
				val: null,
				he: 100,
				he1: 0,
			};
		},
		props: {
			isFullCheck: {
				type: Boolean,
				default: false,
			},
			checkNum: {
				type: Number,
				default: 0,
			},
			totalPrice: {
				type: Number,
				default: 0,
			},
			bo: {
				type: Boolean,
				default: false
			},
			carts: {
				type: Array,
				default: []
			},
			productIds: []
		},
		watch: {
			bo(newValue, oldValue) {
				if (newValue) {
					this.he1 = 100,
						this.he = 0
				} else {
					this.he1 = 0,
						this.he = 100
				}
			},
		},
		methods: {
			...mapMutations('m_user', ['setCart']),
			async deleteTlement() {
				this.productIds = this.carts.filter(obj => obj.goods_state == true).map(i => i.goods_id)
				// let re = await this.$API.cartApi.del(data)
				console.log(this.productIds, "this.productIds");
				let re = await this.$API.cartApi.del({
					"productIds": this.productIds
				});
				console.log(re,'re');
				if (re) {
					uni.showToast({
						title: '删除成功',
					})
					this.$emit("sx")
				} else {
					uni.showToast({
						title: '删除失败',
						icon: 'none', // 不显示图标
					})
				}
			},
			settlement() {
				if (this.checkNum) {
					this.setCart(this.carts)
					//跳转在支付页面
					this.$pub.go(`/pages_shop/buyagain/buyagain?data=${this.totalPrice}`)
					return;
				} else {
					uni.showToast({
						title: '请勾选商品',
						mask: true,
						icon: 'none', // 不显示图标
					})
				}
				//跳转订单详情
				// this.$pub.go("/pages/my/order/order")
			},
			allradioClickHandler() {
				this.$emit('all-change', {
					goods_state: !this.isFullCheck
				})
			}
		}
	}
</script>

<style lang="stylus">
	.my-settle-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// height: 100rpx;
		// 将背景色从 cyan 改为 white
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10rpx;
		font-size: 28rpx;

		.radio {
			display: flex;
			align-items: center;
		}

		.amount {
			color: #F8662D;
		}

		.btn-settle {
			height: 100rpx;
			min-width: 308rpx;
			background-color: #7976e9;
			color: white;
			line-height: 100rpx;
			text-align: center;
			padding: 0 20rpx;
		}
	}

	.ani {
		//  transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
		transition: height 0.5s linear;
	}
</style>